import Vue from 'vue';

export default Vue.extend({
    name: "N9Dialog",
    data() {
        return {
            submitting: false,
            submitable: true,
            show: false,
            destroy: false,

            /* props */
            title: "",
            icon: "",
            css: "",
            page: null,
            params: {},
            callback: null,
            cancelName: '取消',
            okName: '确定',
            multiSelect: false,
            okBtn: true,
            /* props end */

            scrollOps: {
                vuescroll: {
                    // mode: 'slide'
                },
                scrollPanel: {
                    scrollingY: true,
                    scrollingX: false
                },
                rail: {
                    vRail: {
                        pos: "right",
                        background: "#a5d6a7",
                        opacity: '0.5' //'0.5'
                    }
                },
                bar: {
                    vBar: {
                        keepShow: false,
                        opacity: '0.8',
                        hover: false
                    }
                }
            }
        };
    },
    methods: {
        onOk() {
            this.submitting = true;
            this.$refs.body.onOk((result) => {
                // this.$emit("result", result);
                if (this.callback) {
                    this.callback(result);
                }
                this.show = false;
                this.submitting = false;
                this.n9.success("操作成功");
            }, () => {
                this.submitting = false;
            });
        },
        onSelectRows(rows) {
            if (this.multiSelect) {
                this.submitable = rows.length >= 1;
            } else {
                this.submitable = rows.length == 1;
            }
        },
        onVisibleChange(event) {
            if (!event) {
                setTimeout(()=>{
                    this.destroy = true;
                }, 1000)
            }
        }
    },
    created() {
        var dialogs = document.getElementById("dialogContainer");
        var ele = document.createElement('div');
        ele.id = "dialog_" + Math.random().toString(36).substr(2);
        dialogs.appendChild(ele);
        this.$mount("#" + ele.id);
    },
    mounted() {
      this.show = true;
    },
    template:
        '<div v-if="!destroy">' +
        '<Modal v-model="show" class-name="vertical-center-modal"\n' +
        '           :mask-closable="false"\n' +
        '           :closable="!submitting"\n' +
        '           @on-visible-change="onVisibleChange">\n' +
        '        <p class="title" slot="header">\n' +
        '            <Icon :type="icon"></Icon>\n' +
        '            <span>{{title}}</span>\n' +
        '        </p>\n' +
        '        <!--<div>-->\n' +
        '        <vue-scroll ref="scroll" :ops="scrollOps">\n' +
        '        <div :is="page" :style="css" :params="params" v-if="show" ref="body" @submitable="submitable=$event" @selectedRows="onSelectRows"></div>\n' +
        '        </vue-scroll>\n' +
        '        <!--</div>-->\n' +
        '        <div slot="footer">\n' +
        '            <Button type="warning" size="small" shape="circle" icon="md-close" :disabled="submitting" @click="show = false">{{cancelName}}</Button>\n' +
        '            <Button v-if="okBtn" type="primary" shape="circle" icon="md-checkmark" :loading="submitting" @click="onOk" :disabled="!submitable" >{{okName}}</Button>\n' +
        '        </div>\n' +
        '    </Modal>'
    + '</div>'
});
